<!DOCTYPE html>
<html>
<head lang="cn">
    <meta charset="UTF-8">
    <title>后台管理</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<#include "../../common/resources/resources-admin-lte-css.ftl">
<#include "../../common/resources/resources-bsgrid-css.ftl">
</head>
<body class="skin-blue-light sidebar-mini">
<div class="wrapper">
<#include "../common/header.ftl">
<#include "../common/aside.ftl">
    <div class="content-wrapper">

        <section class="content-header">
            <h1>
                站点
                <small>管理</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">相关设置</a></li>
                <li class="active">站点管理</li>
            </ol>
        </section>


        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title">站点管理</h3>
                            <input id="addSite" class="btn btn-info pull-right" type="button" data-toggle="modal"
                                   data-target="#addModal" value="添加站点">
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                        <#include "../common/callout.ftl">
                            <table id="searchTable" style="width:100%;">
                                <tr>
                                    <th w_check="true" w_index="ID" width="3%;"></th>
                                    <th w_index="id" w_sort="id" width="5%;">ID</th>
                                    <th w_index="name">站点名称</th>
                                    <th w_index="dir" w_align="left">站点目录</th>
                                    <th w_index="domain" w_align="left">站点域名</th>
                                    <th w_index="createTime" w_sort="create_time,desc">创建时间</th>
                                    <th w_render="operate" width="10%;">操作</th>
                                </tr>
                            </table>

                        <#--<table id="table11-1"></table>
                        <div id="paginator11-1"></div>-->

                        <#--添加-->
                            <div class="modal fade in" id="addModal">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">添加</h4>
                                        </div>
                                        <form class="form-horizontal" id="addForm" action="${ctx}/admin/site/add">
                                            <div class="modal-body">
                                                <legend>基本设置</legend>
                                                <div class="form-group">
                                                    <label for="name" class="col-sm-2 control-label">站点名称</label>

                                                    <div class="col-sm-10">

                                                        <input type="text" name="name" class="form-control" id="name"
                                                               placeholder="请输入站点名称">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="dir" class="col-sm-2 control-label">目录</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="dir" class="form-control" id="dir"
                                                               placeholder="请输入站点目录">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="domain" class="col-sm-2 control-label">域名</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="domain" class="form-control"
                                                               id="domain"
                                                               placeholder="请输入域名">
                                                    </div>
                                                </div>
                                                <legend>SEO设置</legend>
                                                <div class="form-group">
                                                    <label for="title" class="col-sm-2 control-label">站点标题</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="title" class="form-control" id="title"
                                                               placeholder="请输入站点标题">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="keyword" class="col-sm-2 control-label">关键词</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="keyword" class="form-control"
                                                               id="keyword"
                                                               placeholder="请输入关键词">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="description" class="col-sm-2 control-label">站点描述</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="description" class="form-control"
                                                               id="description"
                                                               placeholder="请输入站点描述">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">
                                                    取消
                                                </button>
                                                <button type="button" id="addSub" class="btn btn-primary"
                                                        data-dismiss="modal">确定
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                <#-- /.modal-content -->
                                </div>
                            <#-- /.modal-dialog -->
                            </div>
                            <!--/.modal -->
                        <#--添加站点结束-->

                            <!-- 修改 -->
                            <div class="modal fade in" id="editModal">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">修改</h4>
                                        </div>
                                        <form class="form-horizontal" id="editForm">
                                            <div class="modal-body">
                                                <legend>基本设置</legend>
                                                <div class="form-group">
                                                    <label for="editName" class="col-sm-2 control-label">站点名称</label>

                                                    <div class="col-sm-10">
                                                        <input type="hidden" name="id" id="editId"/>
                                                        <input type="text" name="name" class="form-control"
                                                               id="editName"
                                                               placeholder="请输入站点名称">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="editDir" class="col-sm-2 control-label">目录</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="dir" class="form-control" id="editDir"
                                                               placeholder="请输入站点目录">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="editDomain" class="col-sm-2 control-label">域名</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="domain" class="form-control"
                                                               id="editDomain"
                                                               placeholder="请输入域名">
                                                    </div>
                                                </div>
                                                <legend>SEO设置</legend>
                                                <div class="form-group">
                                                    <label for="editTitle" class="col-sm-2 control-label">站点标题</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="title" class="form-control"
                                                               id="editTitle"
                                                               placeholder="请输入站点标题">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="editKeyword" class="col-sm-2 control-label">关键词</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="keyword" class="form-control"
                                                               id="editKeyword"
                                                               placeholder="请输入关键词">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="editDescription"
                                                           class="col-sm-2 control-label">站点描述</label>

                                                    <div class="col-sm-10">
                                                        <input type="text" name="description" class="form-control"
                                                               id="editDescription"
                                                               placeholder="请输入站点描述">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default"
                                                        data-dismiss="modal">
                                                    取消
                                                </button>
                                                <button type="button" id="editSub" class="btn btn-primary"
                                                        data-dismiss="modal">确定
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                <#-- /.modal-content -->
                                </div>
                            <#-- /.modal-dialog -->
                            </div>
                            <!--/.modal -->
                        <#--修改站点结束-->

                        </div>
                        <!--/.box-body-->
                    </div>
                    <!-- /.box -->
                </div>
                <!--/.col-->
            </div>
            <!--/.row-->
        </section>
        <!-- /.content -->

    </div>
<#include "../common/footer.ftl">
</div>

<#include "../../common/resources/resources-admin-lte-js.ftl">
<script type="text/javascript" src="${ctx }/static/scripts/jquery.serializeJSON-2.6.1/jquery.serializejson.js"></script>
<#include "../../common/resources/resources-bsgrid-js.ftl">
<script type="text/javascript" src="${ctx }/static/scripts/bootbox-4.4.0.js"></script>

<script type="text/javascript" src="${ctx }/static/scripts/common/common-admin.js"></script>

<script>
    var gridObj;
    $(function () {
        gridObj = $.fn.bsgrid.init('searchTable', {
            url: '${ctx}/admin/admin/get-paged',
            // autoLoad: false,
            pageSizeSelect: true,
            stripeRows: true,
            // 不显示空白航
            displayBlankRows: false,
            pageSize: 10,
            // 分页大小选择下拉框
            pageSizeForGrid:[10,20,30,50],
            // 划过行变色
            rowHoverColor:true,
            extend: {
                settings: {
                	// 支持拖动 
                    supportColumnMove: true
                }
            }
        });
    });
    function operate(record, rowIndex, colIndex, options) {
        return '<button class="btn btn-info btn-xs xiugai" data-toggle="modal" data-target="#editModal">编辑</button><input type="hidden" value="' + gridObj.getRecordIndexValue(record, 'id') + '"> <button  class="btn btn-danger btn-xs shanchu">删除</button>';
        // return '<a href="#" onclick="alert(\'ID=' + gridObj.getRecordIndexValue(record, 'id') + '\');">Operate</a>';
    }


    $(function () {
        // 添加站点按钮,点击后,清空form
        $('#addSite').click(function () {
            $('#id').val('');
            $('#name').val('');
            $('#dir').val('');
            $('#domain').val('');
            $('#title').val('');
            $('#keyword').val('');
            $('#description').val('');
        });
        // 添加站点按钮事件结束

        // 添加站点提交按钮事件
        $('#addSub').click(function () {
            var formJson = $('#addForm').find('input').not('[value=""]').serializeJSON();
            $.ajax({
                url: '${ctx}/admin/site/add',
                data: JSON.stringify(formJson),
                dataType: "json",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    if (data.success == true) {
                        callout('成功', data.msg);
                    }
                    else {
                        callout('失败', data.msg, 'danger');
                    }
                    gridObj.refreshPage();
                },
                error: function () {
                    callout('失败', '站点连接异常', 'danger');
                }
            });
        });
        // 添加结束
        // 修改开始
        $(document).on("click", ".xiugai", function () {
            // 取得id
            var id = $(this).next('input').val();
            // alert(id);
            $.ajax({
                url: '${ctx}/admin/site/get-by-id/' + id,
                dataType: "json",
                type: "GET",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    $('#editId').val(data.data.id);
                    $('#editName').val(HTMLDecode(data.data.name));
                    $('#editDir').val(HTMLDecode(data.data.dir));
                    $('#editDomain').val(HTMLDecode(data.data.domain));
                    $('#editTitle').val(HTMLDecode(data.data.title));
                    $('#editKeyword').val(HTMLDecode(data.data.keyword));
                    $('#editDescription').val(HTMLDecode(data.data.description));
                    // 提交
                    $('#editSub').click(function () {
                        var formJson = $('#editForm').find('input').not('[value=""]').serializeJSON();
                        $.ajax({
                            url: '${ctx}/admin/site/edit-by-id',
                            data: JSON.stringify(formJson),
                            dataType: "json",
                            type: "PUT",
                            contentType: "application/json;charset=utf-8",
                            success: function (data) {
                                if (data.success == true) {
                                    callout('成功', data.msg);
                                }
                                else {
                                    callout('失败', data.msg, 'danger');
                                }
                                // 修改成功后, 刷新列表
                                gridObj.refreshPage();
                            },
                            error: function () {
                                callout('失败', '站点连接异常', 'danger');
                            }
                        });
                    });
                }
            });
        });
        // 修改结束

        // 删除开始
        $(document).on("click", ".shanchu", function () {
            // 取得id
            var id = $(this).prev('input').val();
            bootbox.confirm(
                    {
                        buttons: {
                            confirm: {
                                label: '确认',
                                className: 'btn btn-primary'
                            },
                            cancel: {
                                label: '取消',
                                className: 'btn btn-default'
                            }
                        },
                        message: "是否删除该站点?",
                        callback: function (result) {
                            if (result) {
                                // alert(id);
                                $.ajax({
                                    url: '${ctx}/admin/site/del-by-id/' + id,
                                    dataType: "json",
                                    type: "DELETE",
                                    contentType: "application/json;charset=utf-8",
                                    success: function (data) {
                                        if (data.success == true) {
                                            callout('成功', data.msg);
                                        }
                                        else {
                                            callout('失败', data.msg, 'danger');
                                        }
                                        // 删除成功后, 刷新列表
                                        gridObj.refreshPage();
                                    },
                                    error: function () {
                                        callout('失败', '站点连接异常', 'danger');
                                    }
                                });
                            }
                        }
                    }
            );

        });
        // 删除结束

    });
</script>
</body>
</html>